<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 当前页面如果需要运行在微信内部浏览器 而且 还要使用微信的JS-SDK
    就必须保证当前网页是运行在一台服务器上 而且这台服务器有对应的域名 必须经过备案
    最后要将该域名配置到微信的 JS安全域名设置中
    -->
</head>

<body>
    <div>
        <button id="btn">选择图片</button>

        <button id="btn-preview">预览图片</button>

        <button id="btn-record">录音</button>
        <button id="btn-stop-record">停止录音</button>
        <button id="btn-getlocation">获取位置</button>

    </div>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="./node_modules/js-sha1/build/sha1.min.js"></script>
<script>
    // 1. 获取access_token
    // https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxf4f9c471069993a5&secret=fa137871a01421c02f6708e947a09f50


    // 收到记录access_token
    // 9_g8aiK4_DuTuYskBu0owwn4k6ynokUy55RD8P8yoK8N8zIXAwZUHegduvZnrTWdAoC_-6h94HCYPjCFegrHPSqiTabbLBYEntrqkZdnC_VLeRfz8feosrYHgh-0ZvagSChBA2M1mq00fwD-QeHUGaAAAOBN


    // 2. 获取jsapi_ticket
    // https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=9_xX7AOKfG45Q9eTTsPKeRDl_-_iR4Gc5rYdR3V4JaXn873Ur5CuavEO0k6jPh8a73lncdgG6Xz6zMRcifjFM-U6uM2Ov8TNnuKj0OB5dsrSqoZd52sxztJS2o2IFyqigRxMSQwAsLp4zCt76-MTJfABAWDT&type=jsapi


    // HoagFKDcsGMVCIY2vOjf9n7k5SmWGu5AneoV-7Fgcf7AmWwE_JtPogCpd_SsEdioXvqd6Tc6GNhE81U7_AWo7w

    // 3. 开始签名认真
    var option = {
        noncestr: "HelloWorld",
        jsapi_ticket: "HoagFKDcsGMVCIY2vOjf9n7k5SmWGu5AneoV-7Fgcf7AmWwE_JtPogCpd_SsEdioXvqd6Tc6GNhE81U7_AWo7w",
        timestamp: 1517144307297,
        url: location.href
    }

    //3.1 将所有参与签名的字段进行ASCII码排序 .sort
    var sigList = []
    //将待签名的字段以 key=value的方式存入到数组中
    for (var k in option) {
        sigList.push(k.trim() + "=" + option[k]);
    }
    //给数组进行排序
    sigList.sort()

    //3.2. 将数组转成 key=value&key=value这种字符串
    var sigStr = sigList.join("&");

    //3.3. 对sigStr字符串，进行sha1算法加密 (js-sha1包提供的功能)
    var signature = sha1(sigStr);

    //调用wx.config方法进行 权限验证配置
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxf4f9c471069993a5', // 必填，公众号的唯一标识
        timestamp: option.timestamp, // 必填，生成签名的时间戳
        nonceStr: option.noncestr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，签名生成算法见附录1
        jsApiList: ['checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone',
            'hideMenuItems',
            'showMenuItems',
            'hideAllNonBaseMenuItem',
            'showAllNonBaseMenuItem',
            'translateVoice',
            'startRecord',
            'stopRecord',
            'onVoiceRecordEnd',
            'playVoice',
            'onVoicePlayEnd',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getNetworkType',
            'openLocation',
            'getLocation',
            'hideOptionMenu',
            'showOptionMenu',
            'closeWindow',
            'scanQRCode',
            'chooseWXPay',
            'openProductSpecificView',
            'addCard',
            'chooseCard',
            'openCard'
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });


    wx.ready(function () {
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

        //要使用JS-SDK 基本都在ready方法中调用
        document.getElementById("btn").onclick = function () {
            wx.chooseImage({
                count: 1, // 默认9
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

                    for (var i = 0; i < localIds.length; i++) {
                        var img = new Image();
                        img.src = localIds[i];
                        document.body.appendChild(img);
                    }
                }
            });
        }

        //图片预览接口的使用
        document.getElementById("btn-preview").onclick = function () {
            wx.previewImage({
                // 需要预览的图片http链接列表
                current: 'http://img.hb.aicdn.com/21e878056368253a60a8d50f2f2552dbd6ad0b8118cd4-W2exRA_fw658', // 当前显示图片的http链接
                urls: [
                    'http://img.hb.aicdn.com/4c6ba0ecc6cc0613a8b0f03966153a0441c7fd7ed4ab6-aK0OG1_fw658',
                    'http://img.hb.aicdn.com/dcb5b2c41e5b8e1b6f494940ab53be9f340649c810e79f-70l6Gp_fw658',
                    'http://img.hb.aicdn.com/0926485e57311c8c0cf3de9f86bb34620263cee911cec8-AUd7Zw_fw658'
                ] // 需要预览的图片http链接列表
            });
        }

        //录音接口的使用
        //点击录音按钮，开始录音，停止录音后自动播放录音

        document.getElementById("btn-record").onclick = function () {
            wx.startRecord();
        }

        document.getElementById("btn-stop-record").onclick = function () {
            wx.stopRecord({
                success: function (res) {
                    var localId = res.localId;

                    //停止录音之后，直接播放
                    // wx.playVoice({
                    //     localId // 需要播放的音频的本地ID，由stopRecord接口获得
                    // });

                    //将用户录的音发给服务器识别
                    wx.translateVoice({
                        localId, // 需要识别的音频的本地Id，由录音相关接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            alert(res.translateResult); // 语音识别的结果
                        }
                    });
                }
            });
        }


        //设置分享给朋友的内容
        wx.onMenuShareAppMessage({
            title: '这是一个大新闻', // 分享标题
            desc: '我们学会公众号开发了！', // 分享描述
            link: 'http://mobile.mianshibaodian.com/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'http://img5.imgtn.bdimg.com/it/u=519164302,3531578443&fm=27&gp=0.jpg', // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
                alert("成功分享了")
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });


        document.getElementById('btn-getlocation').onclick = function () {
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                    var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                    var speed = res.speed; // 速度，以米/每秒计
                    var accuracy = res.accuracy; // 位置精度

                    wx.openLocation({
                        latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
                        longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
                        name: '', // 位置名
                        address: '', // 地址详情说明
                        scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
                        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                    });
                }
            });
        }
    });

    wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
</script>

</html>


<!-- qq.lovegf.cn -> free.ngrok.cc -> 127.0.0.1:8888 -->